<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>OAuth2登录集成</title>
    <style>
        .container {
            width: 300px;
            margin: 100px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }
        .form-group input {
            width: 284px;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .submit-btn {
            width: 100%;
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 15px;
        }
        .submit-btn:hover {
            background-color: #0056b3;
        }
        .oauth-buttons {
            margin-top: 20px;
            text-align: center;
        }
        .oauth-btn {
            display: inline-block;
            padding: 8px 15px;
            margin: 0 5px;
            border-radius: 4px;
            color: white;
            text-decoration: none;
            cursor: pointer;
        }
        .divider {
            margin: 20px 0;
            text-align: center;
            position: relative;
            font-size: 14px;
        }
        .divider:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: #ddd;
        }
        .divider span {
            background: white;
            padding: 0 10px;
            position: relative;
            color: #666;
        }
        .login-text {
            font-size: 12px;
            color: #000;
        }
        .form-container {
            display: none;
        }
        .form-container.active {
            display: block;
        }
        .form-switch {
            text-align: center;
            font-size: 14px;
            margin-top: 10px;
        }
        .form-switch a {
            color: #007bff;
            text-decoration: none;
            cursor: pointer;
        }
        .form-switch a:hover {
            text-decoration: underline;
        }
        .error-message {
            color: #dc3545;
            margin-top: 10px;
            text-align: center;
            display: none;
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 登录表单 -->
    <div id="loginForm" class="form-container active">
        <h2 style="text-align: center; margin-bottom: 20px;">OAuth2登录集成</h2>
        <form action="/auth/perform_login" method="post">
            <div class="form-group">
                <label>用户名：</label>
                <input type="text" autocomplete="off"  name="username" required/>
            </div>
            <div class="form-group">
                <label>密码：</label>
                <input type="password" name="password" required/>
            </div>
            <button type="submit" class="submit-btn">登录</button>
        </form>
        <div class="form-switch">
            <a onclick="switchForm('register')">没有账号？立即注册</a>
        </div>
    </div>

    <!-- 注册表单 -->
    <div id="registerForm" class="form-container">
        <h2 style="text-align: center; margin-bottom: 20px;">注册</h2>
        <form id="registerFormElement">
            <div class="form-group">
                <label>用户名：</label>
                <input type="text" name="username" required/>
            </div>
            <div class="form-group">
                <label>密码：</label>
                <input type="password" name="password" required/>
            </div>
            <div class="form-group">
                <label>昵称：</label>
                <input type="text" name="nickname"/>
            </div>
            <div class="form-group">
                <label>邮箱：</label>
                <input type="email" name="email"/>
            </div>
            <button type="submit" class="submit-btn">注册</button>
        </form>
        <div class="form-switch">
            <a onclick="switchForm('login')">已有账号？立即登录</a>
        </div>
    </div>

    <div id="errorMessage" class="error-message"></div>
    
    <div class="divider">
        <span>或使用以下方式登录</span>
    </div>
    
    <div class="oauth-buttons">
        <a href="/auth/oauth2/authorization/github" class="oauth-btn" title="GitHub登录">
            <img src="./images/github.png" width="20px" height="20px"/>
            <div class="login-text">GitHub登录</div>
        </a>
        <a href="/auth/oauth2/authorization/gitee" class="oauth-btn">
            <img src="./images/gitee.png" width="20px" height="20px"/>
            <div class="login-text">Gitee登录</div>
        </a>
        <a href="/auth/oauth2/authorization/qq" class="oauth-btn">
            <img src="./images/qq.png" width="20px" height="20px"/>
            <div class="login-text">QQ登录</div>
        </a>
    </div>
</div>

<script>
    function switchForm(form) {
        document.getElementById('loginForm').classList.toggle('active');
        document.getElementById('registerForm').classList.toggle('active');
        document.getElementById('errorMessage').style.display = 'none';
    }

    document.getElementById('registerFormElement').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const data = {
            username: formData.get('username'),
            password: formData.get('password'),
            nickname: formData.get('nickname'),
            email: formData.get('email')
        };

        fetch('/auth/user/register', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.message) {
                // 注册成功，切换到登录表单
                switchForm('login');
                document.getElementById('errorMessage').style.display = 'none';
            } else {
                // 显示错误信息
                document.getElementById('errorMessage').textContent = data;
                document.getElementById('errorMessage').style.display = 'block';
            }
        })
        .catch(error => {
            document.getElementById('errorMessage').textContent = '注册失败，请稍后重试';
            document.getElementById('errorMessage').style.display = 'block';
        });
    });
</script>
</body>
</html>